<template>
  <div :ref="drop">
    <div ref="mydropDiv">
      <div v-if="props.columnKey === 'type'">
        <span>{{ props.record.type === 1 ? '标签' : '标签组' }}</span>
      </div>
      <div v-else-if="props.columnKey === 'operation'">
        <add-button
          v-if="props.record.type === 0 && !props.record.editing"
          :id="record.tagId"
        />
        <edit-button
          :data="props.record"
          v-model:editing="props.record.editing"
          v-model:loading="props.record.loading"
          @submit="onSubmit(props.columnIndex)"
          :rules="rules"
        />
        <cancel-button
          :data="props.record"
          v-model:editing="props.record.editing"
          :rules="rules"
          v-if="props.record.editing"
        />
        <invalid-button
          :id="props.record.tagId"
          v-model:editing="props.record.editing"
          v-else="props.record.editing"
        />
      </div>
      <div v-else-if="props.columnKey === 'tagName'">
        <input-name
          v-if="props.record.editing"
          v-model:name="props.record[props.columnKey]"
          :loading="props.record.loading"
          :data="props.record"
          :rules="rules"
          :ref="el => setNameRefs(el, props.columnIndex)"
        />
        <div v-else>
          <div style="display: flex; align-items: center">
            <img
              v-if="props.record.type === 0"
              :src="fileFolder"
              alt=""
              style="width: 18px; margin-right: 11px"
            />
            <img
              v-else
              :src="tagImg"
              alt=""
              style="width: 17px; margin-right: 11px"
            />
            {{ props.record.tagName }}
          </div>
        </div>
      </div>
      <div v-else-if="props.columnKey === 'isPublished'">
        <span>
          <a-tag :color="props.record.isPublished === 1 ? 'green' : 'default'">
            {{ props.record.isPublished === 1 ? '已发布' : '未发布' }}
          </a-tag>
        </span>
      </div>
      <div v-else-if="props.columnKey === 'drag'">
        <DraggableRow :key="props.record.orderBy" :record="props.record">
        </DraggableRow>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDrop } from 'vue3-dnd'
import { ref, reactive, watch, unref, computed } from 'vue'
import EditButton from './table-content-edit.vue'
import InvalidButton from './table-content-invalid.vue'
import AddButton from './table-new-tag.vue'
import CancelButton from './table-content-cancel.vue'
import InputName from './table-content-input-name.vue'
import tagImg from '@/assets/images/tag.png'
import fileFolder from '@/assets/images/file-folder.png'
import addImg from '@/assets/images/add.png'
import DraggableRow from './draggable-row.vue'
import { useDataSource, useNameRefs } from './provide-context.js'
import { toRefs } from '@vueuse/core'

let dataSource = useDataSource()
let nameRefs = useNameRefs()
// 接收父组件传递的 props
const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
  columnKey: {
    type: String,
    required: true,
  },
  columnIndex: {
    type: Number,
    required: true,
  },
})
/**
 * 校验规则
 */
let rules = ref({
  tagName: [
    {
      validator(rule, value) {
        if (!value) return Promise.reject('此项不能为空!')
        if (!/^[\u4e00-\u9fa5_a-zA-Z0-9+-]+$/.test(value)) {
          return Promise.reject(
            '名称只能是中文、下划线、连字符、加号、数字、英文!',
          )
        }
        return Promise.resolve()
      },
    },
  ],
})

let mydropDiv = ref(null)
let hoverRow = ref(null)
const hoverImg = ref(null)

const [collect, drop] = useDrop(() => ({
  accept: 'box',
  drop: (item, monitor) => {
    return props.record
  },
  collect: monitor => ({
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }),
  canDrop: () => {
    if (props.record.isPublished === 1 || props.record.editing) {
      return false
    } else {
      return true
    }
  },
}))
const { canDrop, isOver } = toRefs(collect)
const isActive = computed(() => unref(canDrop) && unref(isOver))

function setNameRefs(el, index) {
  nameRefs.value[index] = el
}
function onSubmit(index) {
  nameRefs.value[index].validate()
}
watch(nameRefs, newName => {}, { deep: true, immediate: true })
watch(
  isActive,
  async (newOver, oldOver) => {
    if (isActive.value) {
      if (mydropDiv.value) {
        // hover的tr
        const rect =
          mydropDiv.value?.parentNode.parentNode.parentNode.getBoundingClientRect()
        // 创建hover的 img 元素
        const dragHoverImg = document.createElement('img')
        dragHoverImg.src = addImg
        dragHoverImg.style.position = 'absolute'
        dragHoverImg.style.top = rect.top - 14 + 'px'
        dragHoverImg.style.size = 14 + 'px'
        dragHoverImg.style.left = rect.left + 91 + 'px'
        dragHoverImg.style.zIndex = 99999
        document.body.appendChild(dragHoverImg)
        hoverImg.value = dragHoverImg
      }
    } else {
      // 删除添加的img元素
      if (hoverImg.value) {
        document.body.removeChild(hoverImg.value)
        hoverImg.value = null
      }
    }
  },
  { immediate: false },
)
</script>
